<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>首页</title>
    <link href="../css/initial.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="../css/index.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="../css/slider.css" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" src="../js/modernizr.custom.28468.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>

    <script type="text/javascript" src="../js/jquery.cslider.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#da-slider').cslider();
        });
    </script>

    <!-- district -->
    <link href="../css/owl.carousel.css" rel="stylesheet">
    <script src="../js/owl.carousel.js"></script>
    <script>
        $(document).ready(function() {
            $("#owl-demo").owlCarousel({
                items : 4,
                lazyLoad : true,
                autoPlay : true,
                navigation : true,
                navigationText : ["",""],
                rewindNav : false,
                scrollPerPage : false,
                pagination : false,
                paginationNumbers: false,
            });
        });

        $(function () {
            $.ajax({
                type:"get",
                url:"/currentUser",
                dataType:"json",
                success:function (result) {
                    if(result.username != null){
                        $("#login").html("<span style='color: red;font-size: 0.7em;font-weight:500;'>欢迎您<span/>");
                        $("#login").removeAttr("href");

                        $("#opencard").html(result.username);
                        $("#opencard").removeAttr("href");
                        $("#logout").show();
                    }
                }
            })
        })
        // $(function () {
        //     $("#logout").click(function () {
        //         $.ajax({
        //             type:"get",
        //             url:"/logout",
        //             dataType:"json",
        //             success:function (result) {
        //                 window.location.href = "index";
        //             }
        //         })
        //     })
        // })
    </script>
</head>
<body>
    <!--start header-->
    <div class="header_top">
        <div class="wrap">
            <div class="header">
                <div class="logo">
                    <a href="../html/details.html"><img src="../images/logo.png" alt=""></a>
                </div>

                <div class="h_icon">
                    <ul class="icon1 sub-icon1">
                        <li>
                            <a class="active-icon c1" href="#"><i>$300</i></a>
                            <ul class="sub-icon1 list">
                                <li><h3>购物车为空</h3><a href="#"></a></li>
                                <li><p>如有东西丢失 <a href="#">联系我们</a> 让我们知道</p></li>
                            </ul>
                        </li>
                    </ul>
                </div>

                <div class="h_search">
                    <form class="">
                        <input type="text" value="">
                        <input type="button" value="">
                    </form>
                    <div class="login">
                        <a id="login" href="../html/login.html">登录</a> <a id="opencard" href="../html/opencard.html">注册</a>
                        <a id="logout" href="/logout" style="display: none">退出登录</a>
                    </div>
                </div>

                <div class="clear"></div>
            </div>
        </div>
    </div>

    <div class="header_btm">
        <div class="wrap">
            <div class="header_sub">
                <div class="h_menu">
                    <ul>
                        <li class="active"><a href="../html/index1.html">主頁</a></li> |
                        <li><a href="../html/details.html">購買</a></li> |
                        <li><a href="../html/details.html">包</a></li> |
                        <li><a href="../html/details.html">皮具</a></li> |
                        <li><a href="../html/details.html">錢包</a></li> |
                        <li><a href="../html/details.html">購買</a></li> |
                        <li><a href="../html/details.html">男人裝</a></li> |
                        <li><a href="../html/details.html">鞋子</a></li> |
                        <li><a href="../html/details.html">文</a></li> |
                        <li><a href="../html/details.html">服務</a></li> |
                        <li><a href="../html/details.html">聯繫我們</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="clear"></div>
    </div>

    <!-- start slider -->
    <div id="da-slider" class="da-slider">
        <div class="da-slide">
            <h2>欢迎来到 aditii</h2>
            <p>当她到达意大利山脉的第一座山峰时，她最后一次看到了家乡Bookmarksgrove的天际线，字母表村的标题，以及她自己的路——线巷。</p>
            <a href="../html/details.html" class="da-link">立即购买</a>
            <div class="da-img"><img src="../images/slider1.png" alt="image01" /></div>
        </div>
        <div class="da-slide">
            <h2>易于管理</h2>
            <p>在遥远的地方，在“山”这个词的后面，在远离“Vokalia”和“Consonantia”的地方，存在着“盲文”。他们分居在Bookmarksgrove，就在语义学的海岸上，这是一个很大的语言海洋。</p>
            <a href="..../html/details.html" class="da-link">立即购买</a>
            <div class="da-img"><img src="../images/slider2.png" alt="image01" /></div>
        </div>
        <div class="da-slide">
            <h2>革命</h2>
            <p>一条叫做杜登河的小河从他们的地方流过，为它提供了必要的水。这是一个令人神魂颠倒的国家，在这个国家，你嘴里叼着烤焦的句子。</p>
            <a href="../html/details.html" class="da-link">立即购买</a>
            <div class="da-img"><img src="../images/slider3.png" alt="image01" /></div>
        </div>
        <div class="da-slide">
            <h2>质量控制</h2>
            <p>即使是万能的指向也无法控制盲文，但有一天，一条名为罗伦·伊普森的盲文几乎成了不规范的生活。</p>
            <a href="../html/details.html" class="da-link">立即购买</a>
            <div class="da-img"><img src="../images/slider4.png" alt="image01" /></div>
        </div>
        <nav class="da-arrows">
            <span class="da-arrows-prev"></span>
            <span class="da-arrows-next"></span>
        </nav>
    </div>

    <!--start strip-->
    <div class="wrap">
        <div id="owl-demo" class="owl-carousel">
            <div class="item" onClick="location.href='/details.html';">
                <div class="cau_left">
                    <img class="lazyOwl" data-src="../images/c1.jpg" alt="Lazy Owl Image">
                </div>
                <div class="cau_left">
                    <h4><a href="../html/details.html">品牌鞋子</a></h4>
                    <a href="../html/details.html" class="btn">購買</a>
                </div>
            </div>
            <div class="item" onClick="location.href='../html/details.html';">
                <div class="cau_left">
                    <img class="lazyOwl" data-src="../images/c2.jpg" alt="Lazy Owl Image">
                </div>
                <div class="cau_left">
                    <h4><a href="../html/details.html">品牌T恤</a></h4>
                    <a href="../html/details.html" class="btn">購買</a>
                </div>
            </div>
            <div class="item" onClick="location.href='../html/details.html';">
                <div class="cau_left">
                    <img class="lazyOwl" data-src="../images/c3.jpg" alt="Lazy Owl Image">
                </div>
                <div class="cau_left">
                    <h4><a href="../html/details.html">品牌牛仔</a></h4>
                    <a href="../html/details.html" class="btn">購買</a>
                </div>
            </div>
            <div class="item" onClick="location.href='../html/details.html';">
                <div class="cau_left">
                    <img class="lazyOwl" data-src="../images/c2.jpg" alt="Lazy Owl Image">
                </div>
                <div class="cau_left">
                    <h4><a href="../html/details.html">品牌T恤</a></h4>
                    <a href="../html/details.html" class="btn">購買</a>
                </div>
            </div>
            <div class="item" onClick="location.href='../html/details.html';">
                <div class="cau_left">
                    <img class="lazyOwl" data-src="../images/c1.jpg" alt="Lazy Owl Image">
                </div>
                <div class="cau_left">
                    <h4><a href="../html/details.html">品牌鞋子</a></h4>
                    <a href="../html/details.html" class="btn">購買</a>
                </div>
            </div>
            <div class="item" onClick="location.href='../html/details.html';">
                <div class="cau_left">
                    <img class="lazyOwl" data-src="../images/c2.jpg" alt="Lazy Owl Image">
                </div>
                <div class="cau_left">
                    <h4><a href="../html/details.html">品牌T恤</a></h4>
                    <a href="../html/details.html" class="btn">購買</a>
                </div>
            </div>
            <div class="item" onClick="location.href='/details.html';">
                <div class="cau_left">
                    <img class="lazyOwl" data-src="../images/c3.jpg" alt="Lazy Owl Image">
                </div>
                <div class="cau_left">
                    <h4><a href="../html/details.html">品牌牛仔</a></h4>
                    <a href="../html/details.html" class="btn">購買</a>
                </div>
            </div>
        </div>
        <!----//End-img-cursual---->
    </div>

    <!--start main-->
    <div class="main_bg1">
        <div class="wrap">
            <div class="main1">
                <h2>特色商品</h2>
            </div>
        </div>
    </div>

    <div class="main_bg">
        <div class="wrap">
            <div class="main">
                <!-- start grids_of_3 -->
                <div class="grids_of_3">
                    <div class="grid1_of_3">
                        <a href="../html/details.html">
                            <img src="../images/pic1.jpg" alt=""/>
                            <h3>品牌鞋子</h3>
                            <div class="price">
                                <h4>$300<span>購買</span></h4>
                            </div>
                            <span class="b_btm"></span>
                        </a>
                    </div>
                    <div class="grid1_of_3">
                        <a href="../html/details.html">
                            <img src="../images/pic2.jpg" alt=""/>
                            <h3>品牌t-shirts</h3>
                            <div class="price">
                                <h4>$300<span>購買</span></h4>
                            </div>
                            <span class="b_btm"></span>
                        </a>
                    </div>
                    <div class="grid1_of_3">
                        <a href="../html/details.html">
                            <img src="../images/pic3.jpg" alt=""/>
                            <h3>品牌T恤</h3>
                            <div class="price">
                                <h4>$300<span>購買</span></h4>
                            </div>
                            <span class="b_btm"></span>
                        </a>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="grids_of_3">
                    <div class="grid1_of_3">
                        <a href="../html/details.html">
                            <img src="../images/pic4.jpg" alt=""/>
                            <h3>品牌包包</h3>
                            <div class="price">
                                <h4>$300<span>購買</span></h4>
                            </div>
                            <span class="b_btm"></span>
                        </a>
                    </div>
                    <div class="grid1_of_3">
                        <a href="../html/details.html">
                            <img src="../images/pic5.jpg" alt=""/>
                            <h3>ems女包</h3>
                            <div class="price">
                                <h4>$300<span>購買</span></h4>
                            </div>
                            <span class="b_btm"></span>
                        </a>
                    </div>
                    <div class="grid1_of_3">
                        <a href="../html/details.html">
                            <img src="../images/pic6.jpg" alt=""/>
                            <h3>branded 短袖</h3>
                            <div class="price">
                                <h4>$300<span>購買</span></h4>
                            </div>
                            <span class="b_btm"></span>
                        </a>
                    </div>
                    <div class="clear"></div>
                </div>
                <!-- end grids_of_3 -->
            </div>
        </div>
    </div>
    <!-- start footer -->
    <div class="footer_bg">
        <div class="wrap">
            <div class="footer">
                <!-- start grids_of_4 -->
                <div class="grids_of_4">
                    <div class="grid1_of_4">
                        <h4>特色商品</h4>
                        <ul class="f_nav">
                            <li><a href="">哈德森</a></li>
                            <li><a href="">american apparel</a></li>
                            <li><a href="">美国服饰</a></li>
                            <li><a href="">大佛</a></li>
                            <li><a href="">通道</a></li>
                            <li><a href="">奥迪吉尔</a></li>
                            <li><a href="">教练</a></li>
                            <li><a href="">可汗</a></li>
                        </ul>
                    </div>
                    <div class="grid1_of_4">
                        <h4>男人裝</h4>
                        <ul class="f_nav">
                            <li><a href="">哈德森</a></li>
                            <li><a href="">美国</a></li>
                            <li><a href="">本谢尔曼</a></li>
                            <li><a href="">大佛</a></li>
                            <li><a href="">通道</a></li>
                            <li><a href="">奥迪吉尔</a></li>
                            <li><a href="">教练</a></li>
                            <li><a href="">可汗</a></li>
                        </ul>
                    </div>
                    <div class="grid1_of_4">
                        <h4>女士</h4>
                        <ul class="f_nav">
                            <li><a href="">哈德森</a></li>
                            <li><a href="">美国</a></li>
                            <li><a href="">本谢尔曼</a></li>
                            <li><a href="">大佛</a></li>
                            <li><a href="">通道</a></li>
                            <li><a href="">奥迪吉尔</a></li>
                            <li><a href="">教练</a></li>
                            <li><a href="">可汗</a></li>
                        </ul>
                    </div>
                    <div class="grid1_of_4">
                        <h4>快速鏈接</h4>
                        <ul class="f_nav">
                            <li><a href="">哈德森</a></li>
                            <li><a href="">美国</a></li>
                            <li><a href="">本谢尔曼</a></li>
                            <li><a href="">大佛</a></li>
                            <li><a href="">通道</a></li>
                            <li><a href="">奥迪吉尔</a></li>
                            <li><a href="">教练</a></li>
                            <li><a href="">可汗</a></li>
                        </ul>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- start footer -->

    <div class="footer_bg1">
        <div class="wrap">
            <div class="footer">
                <!-- scroll_top_btn -->
                <script type="text/javascript">
                    $(document).ready(function() {

                        var defaults = {
                            containerID: 'toTop', // fading element id
                            containerHoverID: 'toTopHover', // fading element hover id
                            scrollSpeed: 1200,
                            easingType: 'linear'
                        };

                        // $().UItoTop({ easingType: 'easeOutQuart' });
                    });
                </script>
                <a href="#" id="toTop" style="display: block;"><span id="toTopHover" style="opacity: 1;"></span></a>
                <!--end scroll_top_btn -->
                <div class="copy">
                    <p class="link">Copyright &copy; 2014.Company name All rights reserved.<a target="_blank" href="http://www.mycodes.net/"></a></p>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>
</body>
</html>